import React from 'react';
import {
  Button,
  Modal,
  Transfer,
} from 'antd';

export default class PateoModalTransfer extends React.PureComponent {
  filterOption = (inputValue, option) => {
    return option.description.indexOf(inputValue) > -1;
  }
  handleOk = (e) => {
    e.preventDefault();
    const { handleOk } = this.props;
    if (handleOk) {
      handleOk();
    }
    this.handleCancel();
  };
  handleCancel = () => {
    const { changeVisible } = this.props;
    changeVisible();
  };
  handleChange = (nextTargetKeys, direction, moveKeys) => {
    const { handleChange } = this.props;
    if (handleChange) {
      handleChange(nextTargetKeys, direction, moveKeys);
    }
  };
  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    const { handleSelectChange } = this.props;
    if (handleSelectChange) {
      handleSelectChange(sourceSelectedKeys, targetSelectedKeys);
    }
  };
  render() {
    const { visible, modalTitle, targetKeys, mockData } = this.props;
    return (
      <div>
        <Modal
          visible={visible}
          title={modalTitle}
          width={900}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[<Button key="back" type="ghost" size="large" onClick={this.handleCancel}> 取 消 </Button>,
            <Button key="submit" type="primary" size="large" onClick={this.handleOk}>
              提 交
            </Button>]}
        >
          <Transfer
            rowKey={record => record.code}
            dataSource={mockData}
            titles={['未导入', '已导入']}
            showSearch
            listStyle={{
              width: 360,
              height: 500,
            }}
            searchPlaceholder="关键字"
            targetKeys={targetKeys}
            operations={['导入', '移除']}
            notFoundContent="列表为空"
            onChange={this.handleChange}
            onSelectChange={this.handleSelectChange}
            render={item => item.name}
          />
        </Modal>
      </div>
    );
  }
}
